import React, {PureComponent} from 'react';

import {routerRedux, Link} from 'dva/router';

import moment from 'moment';
import {Table, Alert, Rate, Button, Badge} from 'antd';
import styles from './index.less';

const statusMap = ['default', 'processing', 'success', 'error'];

class ServiceUserTable extends PureComponent {
    state = {
        selectedRowKeys: [],
        totalCallNo: 0,
    };


    handleTableChange = (pagination, filters, sorter) => {
        this.props.onChange(pagination, filters, sorter);
    }

    changeSend = (user_id) => {
        this.props.onSend(user_id)
    }

    cleanSelectedKeys = () => {
        this.handleRowSelectChange([], []);
    }

    renderContent = (record) => {
        return (
            <div style={{display: 'flex', flexDirection: 'row'}}>
                <p className={styles.spanContent}>距离：{record.distance}</p>
                <p className={styles.spanContent}>地址：{record.address}</p>
                <p className={styles.spanContent}>服务时间:{record.work_time}</p>
                <p className={styles.spanContent} style={{marginRight: 12}}>
                    是否工长:{record.worker_leader == 1 ? '是' : '否'}</p>
            </div>
        )
    }

    GetDistance(lat1, lng1, lat2, lng2) {
        hide("warning");
        if (( Math.abs(lat1) > 90  ) || (  Math.abs(lat2) > 90 )) {
            document.getElementById("warning").innerHTML = ("兄台，这哪里是纬度啊？分明是想忽悠我嘛");
            show("warning");
            return "耍我？拒绝计算！";
        } else {
            hide("warning");
        }
        if (( Math.abs(lng1) > 180  ) || (  Math.abs(lng2) > 180 )) {

            show("warning");
            document.getElementById("warning").innerHTML = ("兄台，这哪里是经度啊？分明是想忽悠我嘛");
            return "耍我？拒绝计算！";
        } else {
            hide("warning");
        }
        var radLat1 = rad(lat1);
        var radLat2 = rad(lat2);
        var a = radLat1 - radLat2;
        var b = rad(lng1) - rad(lng2);
        var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
            Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
        s = s * 6378.137;// EARTH_RADIUS;
        s = Math.round(s * 10000) / 10000;
        return s;
    }

    render() {
        const {selectedRowKeys, totalCallNo} = this.state;
        const {data: {list, pagination}, loading} = this.props;

        const status = ['1星', '2星', '3星', '4星', '5星'];

        const columns = [
            {
                title: '姓名',
                dataIndex: 'true_name',
                render: (val, row) => {

                    return (
                        <Link to={`/manager/${row.id}`}>{val}</Link>
                    )
                }
            },
            {
                title: '服务类别',
                dataIndex: 'service_type',
                render: (val, row) => {
                    return (
                        <p>{row.service_type_item.name}</p>
                    )
                },
            },
            {
                title: '服务单数',
                dataIndex: 'service_count',
                sorter: true,
                render: val => (
                    <p style={{textAlign: 'center'}}>
                        {val}
                    </p>
                ),
            },
            {
                title: '平均评分',
                dataIndex: 'star',
                filters: [
                    {
                        text: status[0],
                        value: 1,
                    },
                    {
                        text: status[1],
                        value: 2,
                    },
                    {
                        text: status[2],
                        value: 3,
                    },
                    {
                        text: status[3],
                        value: 4,
                    },
                    {
                        text: status[4],
                        value: 5,
                    },
                ],
                render(val) {
                    return <Rate disabled defaultValue={val}/>;
                },
            },
            {
                title: '用户状态',
                dataIndex: 'work_status',
                render: val => <span>{val}</span>,
            },
            {
                title: '操作',
                render: (val, record) => (
                    <p>
                        <Button onClick={() => {
                            this.changeSend(record.id)
                        }}>派单</Button>
                    </p>
                ),
            },
        ];

        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: true,
            ...pagination,
        };

        const rowSelection = {
            selectedRowKeys,
            onChange: this.handleRowSelectChange,
            getCheckboxProps: record => ({
                disabled: record.disabled,
            }),
        };


        return (
            <div className={styles.standardTable}>
                <div className={styles.tableAlert}>

                </div>
                <Table
                    loading={loading}
                    rowKey={record => record.id}
                    dataSource={list}
                    expandedRowRender={(record) => this.renderContent(record)}
                    columns={columns}
                    pagination={paginationProps}
                    onChange={this.handleTableChange}
                />
            </div>
        );
    }
}

export default ServiceUserTable;
